<template>
	<div class="order-details">
		<!-- 订单状态 -->
		<div class="status-bar">
			<h3>等待发货</h3>
			<!-- <p>剩 27 分 52 秒自动关闭</p> -->
		</div>

		<!-- 用户信息 -->
		<div class="user-info">
			<p>{{ orderData.address }}</p>
		</div>

		<!-- 商品列表 -->
		<div class="product-list">
			<div class="product-item" v-for="(item, index) in orderData.items" :key="item.id">
				<img :src="item.sku.imageUrl " alt="Product Image">
				<div class="product-details">
					<h4>{{ item.productName }}</h4>
					<p class="product-spec">{{ item.specInfo }}</p>
					<p class="product-price">¥{{ item.price }}</p>
				</div>
				<span class="product-quantity">x{{ item.quantity }}</span>
			</div>
		</div>

		<!-- 订单信息 -->
		<div class="order-info">
			<div class="info-row">
				<span>订单编号：</span>
				<span>{{orderData.orderNo}}</span>
			</div>
			<div class="info-row">
				<span>下单时间：</span>
				<span>{{ formatTime(orderData.createTime) }}</span>


			</div>
			<div class="info-row">
				<span>支付方式：</span>
				<span>{{ getPaymentTypeName(orderData.paymentType) }}</span>
			</div>
			<div class="info-row">
				<span>商品合计</span>
				<span>¥{{orderData.itemsAmount }}</span>
			</div>
			<div class="info-row">
				<span>活动优惠</span>
				<span class="discount">-¥{{(orderData.discountAmount - orderData.couponAmount)}}</span>
			</div>
			<div class="info-row">
				<span>优惠券</span>
				<span class="discount">-¥{{orderData.couponAmount}}</span>
			</div>
			<div class="info-row">
				<span>运费</span>
				<span>+¥0.00</span>
			</div>
			<div class="info-row total">
				<span>实付款：</span>
				<span>¥{{orderData.totalAmount}}</span>
			</div>
		</div>

		<!-- 客服信息 -->
		<div class="customer-service">
			<p>服务时间：9:00-24:00</p>
			<div class="service-buttons" @click="toOnlineService()">
				<button class="service-btn">在线客服</button>

				<button class="service-btn">电话客服</button>
			</div>
		</div>

	

		<!-- 底部按钮 -->
		<div class="bottom-buttons">
			<button class="cancel-btn" @click="showCancelConfirm(orderData)">取消订单</button>
			<button class="pay-btn" @click="reBuy">再次购买</button>
		</div>

		<!-- 取消订单确认弹窗 -->
		<!-- <uni-popup ref="cancelPopup" type="dialog">
			<uni-popup-dialog type="warning" title="提示" content="是否确认取消订单？" :duration="2000" :before-close="true"
				@confirm="confirmCancel" @close="closeCancel"></uni-popup-dialog>
		</uni-popup> -->
	</div>
</template>

<script>
	import {
		get,put
	} from '@/utils/request';
	export default {
		data() {
			return {
				orderData: {}, // 用来保存订单信息
				// totalTime: 40 * 60, // 40分钟倒计时，单位秒
				// timer: null
			};
		},
		methods: {
			toOnlineService() {
				uni.navigateTo({
					url: '/pages/mySxz/onlineService/onlineService'
				});

			},
			/* 更改时区 （后端传递差八个小时）*/
			formatTime(t) {
				if (!t) return '';
				return new Date(t.replace(' ', 'T') + 'Z')
					.toLocaleString('zh-CN', {
						hour12: false
					})
					.replace(/\//g, '-');
			},
			getPaymentTypeName(type) {
				switch (type) {
					case 1:
						return '支付宝';
					case 2:
						return '微信';
					case 3:
						return '银行卡';
					default:
						return '未知';
				}
			},
			// // 显示取消订单确认弹窗
			// showCancelConfirm() {
			// 	this.$refs.cancelPopup.open();
			// },

			// // 确认取消订单
			// confirmCancel() {
			// 	this.$refs.cancelPopup.close();
			// 	uni.navigateTo({
			// 		url: '/pages/askcancel/askcancel'
			// 	});
			// },

			// // 关闭弹窗
			// closeCancel() {
			// 	this.$refs.cancelPopup.close();
			// 	uni.showToast({
			// 		title: '已取消操作',
			// 		icon: 'none'
			// 	});
			// },
			async showCancelConfirm(orderData) {
			  uni.showModal({
			    title: '确认取消',
			    content: '您确定要取消订单吗？',
			    success: async (res) => {
			      if (res.confirm) {
			        try {
						// console.log(orderData);
			          // 拷贝一份订单对象并修改状态
			          const payload = { ...orderData, status: 4 };
			
			          const response = await put('/transaction/shoporder', payload);
			
			          if (response.code === 200) {
			
			            uni.showToast({
			              title: '取消成功',
			              icon: 'success'
			            });
						console.log("取消成功后");
						console.log(orderData);
						// 更新缓存区数据  替换成刚取消的订单信息
						uni.setStorageSync("cancleOrderData", orderData);
						uni.redirectTo({
							url:'/pages/orderCancle/orderCancle'
						});
			          } else {
			            uni.showToast({
			              title: '操作失败',
			              icon: 'none'
			            });
			          }
			        } catch (err) {
			          uni.showToast({
			            title: '请求失败',
			            icon: 'none'
			          });
			        }
			      }
			    }
			  });
			},

			// 再次购买
			reBuy() {
				uni.navigateTo({
					url: '/pages/product-detail/index'
				});
			},

			onLoad() {
				this.orderData = uni.getStorageSync("shipOrderData") || {};
				console.log("收到的待发货订单数据：", this.orderData);
			}
		}
	};
</script>

<style scoped>
	.order-details {
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		color: #333;
		padding-bottom: 70px;
		background-color: #f5f5f5;
	}

	.status-bar {
		background-color: #FF9500;
		color: white;
		padding: 15px;
		text-align: center;
		height: 52px;
	}

	.status-bar h3 {
		margin: 0;
		font-size: 18px;
		padding: 16px;
		font-weight: 500;
	}

	.status-bar p {
		margin: 5px 0 0;
		font-size: 14px;
	}

	.user-info {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.user-info p {
		margin: 5px 0;
		font-size: 14px;
		line-height: 1.4;
	}

	.product-list {
		margin: 10px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 12px;
		border-bottom: 1px solid #f0f0f0;
	}

	.product-item:last-child {
		border-bottom: none;
	}

	.product-item img {
		width: 70px;
		height: 70px;
		border-radius: 4px;
		object-fit: cover;
		margin-right: 12px;
	}

	.product-details {
		flex: 1;
	}

	.product-details h4 {
		margin: 0 0 5px;
		font-size: 15px;
		font-weight: 500;
	}

	.product-spec {
		margin: 0 0 5px;
		font-size: 12px;
		color: #999;
	}

	.product-price {
		margin: 0;
		font-size: 15px;
		color: #FF9500;
		font-weight: 500;
	}

	.product-quantity {
		color: #666;
		font-size: 14px;
	}

	.order-info {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.discount {
		color: #FF9500;
	}

	.total {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
		font-weight: 500;
		color: #333;
	}

	.customer-service {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.customer-service p {
		margin: 0 0 15px;
		font-size: 14px;
		color: #666;
	}

	.service-buttons {
		display: flex;
		justify-content: center;
		gap: 15px;
	}

	.service-btn {
		padding: 4px 20px;
		border: 1px solid #FF9500;
		border-radius: 20px;
		background: white;
		color: #FF9500;
		font-size: 14px;
		height: 30px;
		line-height: 22px;
	}

	.recommended-products {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.recommended-products h3 {
		margin: 0 0 15px;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
	}

	.product-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.recommended-products .product-item {
		display: flex;
		flex-direction: column;
		padding: 0;
		border: none;
	}

	.recommended-products img {
		width: 100%;
		height: 150px;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.product-name {
		margin: 0 0 5px;
		font-size: 13px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 36px;
		line-height: 18px;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		padding: 10px;
		background: white;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
	}

	.cancel-btn {
		padding: 4px 20px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background: white;
		color: #333;
		font-size: 14px;
		margin-right: 10px;
		height: 30px;
		line-height: 22px;
	}

	.pay-btn {
		padding: 4px 25px;
		border: none;
		border-radius: 4px;
		background: #FF9500;
		color: white;
		font-size: 14px;
		height: 30px;
		line-height: 22px;
	}
</style>